<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <![endif]-->

    <style>
        .head-one {
            padding: 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            padding-right:20px ;
            padding-top: 30px;
            padding-left: 20px;
            margin-top: 20px;
            box-sizing: inherit;
            display: block;
            border: 1px solid #ebeef5;
        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }

        .el-card__body {
            /*margin-bottom: 15px;*/
            padding: 20px 20px 10px 20px;
            background-color: white;
            font-size: 14px;
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }
        .mybtn a{
            color: white;
        }
        /*ul .pagination {*/
        /*    margin-top: 0;*/
        /*}*/
        .pagination > li > form, .pagination > li > select, .pagination > li > input {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .pagination > li > input {
            outline: none;
            width: 40px;
            text-align: center;
        }
        #name{
            outline: none;
        }
        #name:focus{
            border: 2px #bfbdbd solid;
        }
        #my-select{
            outline: none;
        }
        #type{
            outline: none;
            padding: 3px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: black;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .page-title-box {
            /*margin: 0px -15px 7px -15px;*/
            padding: 6px;

            background-color: #ffffff;

        }
        .head-one{
            padding: 20px;
            background-color: white;
            font-size: 14px;
            border: solid 1px rgba(0,0,0,0.2);

        }
        .el-card__body {
            padding: 20px;

            background-color: #ffffff;
            font-size: 14px;
            border: solid 1px rgba(0,0,0,0.2);
        }


    </style>
</head>

<body class="sticky-header">


<%@include file="../inc/left.jsp" %>


<!-- main content start-->
<div class="main-content">

    <%@include file="../inc/header.jsp" %>

    <!--body wrapper start-->
    <div class="wrapper">
        <div class="page-title-box">
            <p class="page-title" style="color: black;">优惠券列表<small style="font-size: 20px;">&emsp;(吴隆林)</small></p>
            <ol class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">营销</a>
                </li>
                <li class="active">
                    优惠券列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>

        <div data-v-2ef16592="" class="el-card filter-container is-never-shadow"><!---->
            <div class="el-card_body">

                <div data-v-2ef16592="" style="margin-top: 15px;" class="head-one ">
                    <div data-v-2ef16592=""><i class="fa fa-search" aria-hidden="true"></i></i> <span
                            data-v-2ef16592="">筛选搜索</span>
                        <button data-v-2ef16592="" onclick="select()" type="button"
                                class="btn btn-info"
                                style="float: right;"><!----><!----><span>查询搜索</span></button>
                        <a href="${pageContext.request.contextPath}/sell/index_restart">
                            <button data-v-2ef16592="" type="button" class="btn btn-default" style="float: right; margin-right: 15px;"><!----><!----><span>重置</span></button>
                        </a>
                    </div>
                    <form data-v-2ef16592="" class="el-form el-form--inline">
                        <div class="row">
                            <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4">

                                <div class="el-form-item__content">
                                    <div data-v-2ef16592="" class="input-width el-input el-input--small">
                                        <!---->
                                        <label
                                                class="el-form-item__label"
                                                style="width: 100px;">优惠券名称：
                                        </label>
                                        <input
                                                id="name" type="text" autocomplete="off" placeholder="优惠券名称"
                                                class="el-input__inner">
                                        <!---->
                                        <!----><!----></div>
                                    <!----></div>
                            </div>
                            <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4">

                                <div class="el-form-item__content">
                                    <div data-v-2ef16592="" class="el-select input-width el-select--small"><!---->
                                        <div class="el-input el-input--small el-input--suffix"><!---->
                                            <label
                                                    class="el-form-item__label"
                                                    style="width: 100px;">优惠券类型：
                                            </label>
                                            <select id="type"  placeholder="全部"class="el-input__inner" style="width: 150px">

                                                <option value="">全部</option>
                                                <option value="0">全场赠券</option>
                                                <option value="1">会员赠券</option>
                                                <option value="2">购物赠券</option>
                                                <option value="3">注册赠券</option>
                                            </select>
                                        </div>
                                    </div><!----></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div data-v-2ef16592="" class="el-card operate-container is-never-shadow head-two "><!---->
                    <div class="el-card__body"><i class="fa fa-server" aria-hidden="true"></i> <span data-v-2ef16592=""
                                                                                                     class="head-one1">数据列表</span>
                        <button data-v-2ef16592="" type="button"
                                class="mybtn  btn btn-info" style="margin-left: 1150px">
                            <!----><!---->
                            <a  href="${pageContext.request.contextPath}/sell/coupon_edit">添加</a>
                        </button>
                    </div>
                </div>

                <div class="head-three" style="background-color: white;border: solid 1px rgba(0,0,0,0.2)">
                    <table class="table table-bordered table-main">
                        <thead>
                        <tr>
                            <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">优惠券名称</th>
                            <th style="text-align: center">优惠券类型</th>
                            <th style="text-align: center">可使用商品</th>
                            <th style="text-align: center">使用门槛</th>
                            <th style="text-align: center">面值</th>
                            <th style="text-align: center">适用平台</th>
                            <th style="text-align: center">有效期</th>
                            <th style="text-align: center">状态</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        <c:forEach items="${coupon.list}" var="var">
                            <tr>
                                <td><input type="checkbox" id="checks"></td>
                                <td>${var.id}</td>
                                <td>${var.name}</td>
                                <td>
                                    <c:if test="${var.type==0}">
                                        全场赠券
                                    </c:if>

                                    <c:if test="${var.type==1}">
                                        会员赠券
                                    </c:if>
                                    <c:if test="${var.type==2}">
                                        购物赠券
                                    </c:if>
                                    <c:if test="${var.type==3}">
                                        注册赠券
                                    </c:if>
                                </td>
                                <td>
                                    <c:if test="${var.useType==0}">
                                        全场通用
                                    </c:if>
                                    <c:if test="${var.useType==1}">
                                        指定分类
                                    </c:if>
                                    <c:if test="${var.useType==2}">
                                        指定商品
                                    </c:if>
                                </td>
                                <td>满${var.minPoint}可用</td>
                                <td>${var.amount}元</td>
                                <td>
                                    <c:if test="${var.platform==0}">
                                        全平台
                                    </c:if>
                                    <c:if test="${var.platform==1}">
                                        移动平台
                                    </c:if>
                                    <c:if test="${var.platform==2}">
                                        pc平台
                                    </c:if>
                                </td>
                                <td><fmt:formatDate value="${var.startTime}"/> 至<fmt:formatDate
                                        value="${var.endTime}"/></td>
                                <td> ${Time>var.endTime?"已过期":"未过期"}</td>

                                <td>
                                    <a href="${pageContext.request.contextPath}/sell/coupon_select?id=${var.id}">
                                        <button class="btn-success">查看</button>
                                    </a>

                                    <a href="${pageContext.request.contextPath}/sell/coupon_edit?id=${var.id}">
                                        <button class="btn-info">编辑</button>
                                    </a>
                                    <a onclick="sure(${var.id})">
                                        <button class="btn-danger">删除</button>
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div>
                        <form action="coupon_index?page">

                            <ul class="pagination"  id="myul">
                                <li class="pagination">
                                    <span>共${coupon.total}条</span>
                                </li>
                                <li class="pagination">
                                    <select id="my-select" name="size" onchange="change()" style="padding: 5.5px 12px">
                                        <option value="5" ${coupon.pageSize==5?"selected":""}>5页/条</option>
                                        <option value="10" ${coupon.pageSize==10?"selected":""}>10页/条</option>
                                        <option value="20"${coupon.pageSize==20?"selected":""}>20页/条</option>
                                    </select>
                                </li>
                                <c:if test="${coupon.pageNum>1}">
                                    <li ><a href=" coupon_index?page=${coupon.pageNum-1}">上一页</a></li>
                                </c:if>

                                <c:forEach begin="1" end="${coupon.pages}" var="i">
                                    <li class="${coupon.pageNum==i?"active":""}"><a href="coupon_index?page=${i}">${i}</a></li>
                                </c:forEach>

                                <c:if test="${coupon.pageNum<coupon.pages}">
                                    <li><a href="coupon_index?page=${coupon.pageNum+1}">下一页</a></li>
                                </c:if>

                                <li class="pagination">
                                    <span>前往</span>
                                </li>
                                <li class="pagination">
                                    <input name="page">
                                </li>
                                <li class="pagination">
                                    <span>页</span>
                                </li>
                            </ul>
                        </form>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <!-- End Wrapper-->


    <%@include file="../inc/footer.jsp" %>


</div>

<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--End main content -->
<script>
    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick = function () {
            all.checked = this.checked
        }
    }

    function select(page) {
        let name = $("#name").val();
        let type = $("#type").val();

        $.ajax({
            url: '${pageContext.request.contextPath}/sell/selectById',
            type: 'post',
            data: {page:page,name: name, type: type},
            success: function (result) {
                console.info(result)
                var rows = result.list;
                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    html += '<tr>';
                    html += '<td><input type="checkbox" id="checks"></td>';
                    var id = rows[i].id;
                    html += '<td>' + id + '</td>';
                    var name = rows[i].name;
                    html += '<td>' + name + '</td>';
                    var type = rows[i].type;
                    if(type==0){
                        html += '<td>' + '全场赠券' + '</td>';
                    }
                    if(type==1){
                        html += '<td>' + '会员赠券' + '</td>';
                    }
                    if(type==2){
                        html += '<td>' + '购物赠券' + '</td>';
                    }
                    if(type==3){
                        html += '<td>' + '注册赠券' + '</td>';
                    }
                    var useType = rows[i].useType;
                    if(useType==0){
                        html += '<td>' + '全场通用' + '</td>';
                    }
                    if(useType==1){
                        html += '<td>' + '指定分类' + '</td>';
                    }
                    if(useType==2){
                        html += '<td>' + '指定商品' + '</td>';
                    }

                    var minPoint = rows[i].minPoint;
                    html += '<td>' + '满'+minPoint+'可用' + '</td>';
                    var amount = rows[i].amount;
                    html += '<td>' + amount+'元' + '</td>';
                    var platform = rows[i].platform;
                    if(platform==0){
                        html += '<td>' + '全平台' + '</td>';
                    }
                    if(platform==1){
                        html += '<td>' + '移动' + '</td>';
                    }
                    if(platform==2){
                        html += '<td>' + 'PC'+'</td>';
                    }
                    html += '<td>' + dateFormat(rows[i].startTime) + '到' + dateFormat(rows[i].endTime) + '</td>';
                    const startTime = new Date(dateFormat(rows[i]).startTime);
                    const endTime = new Date(dateFormat(rows[i].endTime));
                    const time = new Date()
                    if (time > endTime) {
                        html += '<td>'+'已过期'+'</td>';
                    }
                    if (time < endTime) {
                        html += '<td>'+'未过期'+'</td>';
                    }
                    html += '<td>' +'<a href="${pageContext.request.contextPath}/sell/coupon_select?id='+ id + '"><button class="btn-success">查看</button></a>'+
                        '<a href="${pageContext.request.contextPath}/sell/coupon_edit?id=' + id + '  "><button class="btn-info">编辑</button></a>'
                        + '<a href="${pageContext.request.contextPath}/sell/coupon_delete?id=' + id + '"><button class="btn-danger">删除</button></a></td>'
                    html += '</tr>'
                }
                $("#tbody").html(html);

                let html2 = '';
                let pages=result.pages;
                let nowPage = result.pageNum;
                let endPage = result.pages;
                if (nowPage == 1){
                    html2 += ''
                }else {
                    html2 += '<li ><a href="#" onclick="select(' + result.prePage + ')">'+'<<'+'</a> </li>'
                }
                for(let i=1;i<=pages;i++){
                    if(nowPage == i){
                        html2 += '<li class="active"><a href="#" >'+i+'</a> </li>'
                    }else{
                        html2 += '<li ><a href="#"  onclick="select('+i+')">'+i+'</a> </li>'
                    }
                }
                if (nowPage == endPage){
                    html2 += ''
                }else {
                    html2 += '<li ><a href="#" onclick="select(' + result.nextPage + ')">'+'>>'+'</a> </li>'
                }
               $("#myul").html(html2)

            }
        })
    }
    function change() {
       let size= $("#my-select").val()
        location.href="${pageContext.request.contextPath}/sell/coupon_index?size="+size;
    }
    function sure(id) {
        let sure=confirm("确定删除吗？");
        if(sure){
            location.href="${pageContext.request.contextPath}/sell/coupon_delete?id="+id;
        }
    }


    // 日期格式化
    function dateFormat(date) {
        let year = new Date(date).getFullYear();
        let month = new Date(date).getMonth() + 1;
        if (month < 10) {
            month = "0" + month;
        }
        let day = new Date(date).getDate();
        if (day < 10) {
            day = "0" + day;
        }
        return year + "-" + month + "-" + day;
    }
</script>

</body>

</html>

